//color
@colorMain:#4d65fd;//主题色
@colorBorder:#e8e8e8;//边框灰
@colorBg:#fafafa; //背景灰
@colorWrite:#fff; //白色
@colorRed:red; //白色
@colorBoxShadow:rgba(0, 0, 0, 0.09); //盒子阴影
@colorBoxGreen:#52c41a; 
@fontGrey:#9d9fa2;
@border-radius-base :2px;

.pink{
  color: pink;
}
.bgWrite{
  background: @colorWrite;
}
.colorMain{
  color: @colorMain;
}
.colorRed{
  color: @colorRed;
}
.bgGreen{
  background: @colorBoxGreen;
  color: @colorWrite;
}
.textGrey{
  color: @fontGrey;
}

//flex
.alignItem(@direction){
  align-items: @direction;
}
.justifyContent(@direction){
  justify-content: @direction;
}
.flex {
  display: flex;
  &-center {
    &:extend(.flex);
    .justifyContent(center);
    .alignItem(center);
  }
  &-between {
    &:extend(.flex);
    .justifyContent(space-between);
    .alignItem(center);
  }
}

// margin
.mBase(@val){
  margin: @val;
}
.mDerection(@derection,@val){
  margin-@{derection}: @val;
}
.margin{
  &0{
    .mBase(0px)
  }
  &10{
    .mBase(10px)
  }
  &20{
    .mBase(20px)
  }
  &30{
    .mBase(30px)
  }
  &-r10{
    .mDerection(right,10px)
  }
  &-l10{
    .mDerection(right,20px)
  }
  &-r20{
    .mDerection(right,20px)
  }
  &-r15{
    .mDerection(right,15px)
  }
  &-t20{
    .mDerection(top,20px)
  }
  &-t10{
    .mDerection(top,10px)
  }
  &-b10{
    .mDerection(bottom,10px)
  }
  &-b20{
    .mDerection(bottom,20px)
  }
  &-b70{
    .mDerection(bottom,70px)
  }
}

//float
.fBase(@direction){
  float: @direction;
}
.float{
  &-left{
    .fBase(left);
  }
  &-right{
    .fBase(right);
  }
}

//text-align
.taBase(@direction){
  text-align: @direction ;
}
.text-align{
  &-left{
    .taBase(left)
  }
  &-right{
    .taBase(right)
  }
  &-center{
    .taBase(center)
  }
}
//display
.dspBase(@val){
    display: @val;
  }
.display{
  &-inline{
    .dspBase(inline)
  }
  &-block{
    .dspBase(block)
  }
  &-inline-block{
    .dspBase(inline-block)
  }
  &-none{
    .dspBase(none)
  }
}
//box-shadow
.cardBoxShadow{
  box-shadow: 0 2px 8px @colorBoxShadow;
}
//ellipsis 溢出隐藏
.ellipsis(@width){
  width:@width;    
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

//position
.pstBase(@val){
  position: @val;
}
.position{
  &-relative{
    .pstBase(relative)
  }
  &-absolute{
    .pstBase(absolute)
  }
}

// cursor
.cursor {
  &-pointer {
    cursor: pointer;
  }
}

.drawer-footer-btn {
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid @colorBorder;
  padding: 16px 16px;
  background: @colorWrite;
  .pstBase(absolute);
  .taBase(right);
  z-index: 1;
}

.select-selection{
  width: 150px !important;
}
//font
.fontBase(@val){
  font-size: @val;
}
.font{
  &30{
    .fontBase(30px)
  }

  &24{
    .fontBase(24px)
  }
  &20{
    .fontBase(20px)
  }
  &16{
    .fontBase(16px)
  }
  &15{
    .fontBase(15px)
  }
  &14{
    .fontBase(14px)
  }
  &13{
    .fontBase(13px)
  }
  &12{
    .fontBase(12px)
  }
  &10{
    .fontBase(10px)
  }
}
.table-list-icon{
  .anticon{
    font-size: 16px !important;
  }
}